<template>
  <!-- <div>
    <h1>标签管理</h1>
  </div> -->
  <div id="lbgl">
    <div id="sxcx">
      <!-- 弹框1 -->
      <div class="tjlb">
        <div class="sxcx_tjlb">
          <el-dialog title="添加标签管理" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
            <el-form v-model="labelPosition" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
              <el-form-item label="关键词名称" prop="title">
                <el-input v-model="ruleForm.title"></el-input>
              </el-form-item>
              <el-form-item label="位置" prop="address" required>
                <el-input v-model="ruleForm.address" style="width:60px"></el-input>
              </el-form-item>
              <el-form-item label="状态" prop="shelf">
                <el-switch v-model="ruleForm.shelf"></el-switch>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </div>
      </div>
      <!-- 弹框2 -->
      <div class="tjlb">
        <div class="sxcx_tjlb">
          <el-dialog title="编辑标签" :visible.sync="dialogVisible2" width="70%" :before-close="handleClose">
            <el-form v-model="labelPosition" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
              <el-form-item label="关键词名称" prop="title">
                <el-input v-model="ruleForm.title"></el-input>
              </el-form-item>
              <el-form-item label="位置" prop="address" required>
                <el-input v-model="ruleForm.address" style="width:60px"></el-input>
              </el-form-item>
              <el-form-item label="状态" prop="shelf">
                <el-switch v-model="ruleForm.shelf"></el-switch>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="editSure">提交</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </div>
      </div>
    </div>
    <div id="sjlb">
      <div class="clear">
        <span>数据列表</span>
        <div class="clear">
          <!-- <span>最多同时上架6个关键词</span> -->
          <el-button class="sjlb_btn" type="button" @click="dialogVisible = true">添加</el-button>
          <el-button class="sjlb_btn" type="button" @click="allDel">删除</el-button>
        </div>
      </div>
      <div class="sjlb_table">
        <el-table @selection-change="selectCheck" ref="multipleTable" :data="sjlbData" border style="width: 100%">
          <el-table-column type="selection" width="40">
          </el-table-column>
          <el-table-column prop="id" label="序号" width="50">
          </el-table-column>
          <el-table-column prop="title" label="标签" width="400">
          </el-table-column>
          <el-table-column prop="address" label="位置" width="180">
          </el-table-column>
          <el-table-column prop="shelf" label="是否上架" width="80">
            <template slot-scope="scope">
              <el-switch active-color="#409EFF" inactive-color="#C0CCDA" v-model="scope.row.shelf" @change="labelShelf(scope.row)"></el-switch>
            </template>
            <!-- :active-value="1" 
               :inactive-value="0"  -->
          </el-table-column>
          <el-table-column prop="operation" label="操作">
            <div slot-scope="scope">
              <el-button @click="editData(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="delSure(scope.row)" type="text" size="small">删除</el-button>
            </div>
          </el-table-column>
        </el-table>
      </div>
      <div class="sjlb_page">
        <!-- .sync用于当点击页时，nowpage变为点击页-->
        <el-pagination :current-page.sync="nowPage" :page-size="nowNum" layout=" prev, pager, next" :total="lbglData.length">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      lbglData: [],

      input1: '',
      value1: '',
      value: '',
      nowPage: 1,
      nowNum: 5,//每页显示几条数据
      options: [{
        value: '选项1',
        label: '1111',
      }],
      dialogVisible: false,
      dialogVisible2: false,
      delFrom: {},
      ruleForm: {
        title: '',
        address: '',
        shelf: '',
      },
      rules: {
        title: [
          { required: true, message: '请输入关键名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        address: [
          {
            required: true, message: '请填写位置', trigger: 'blur'
          }
        ],
        shelf: [
          {
            required: true, message: '', trigger: 'blur'
          }
        ],

      },
      fileList: [{
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }, {
        name: 'food2.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }]
    }
  },
  // 计算页码数
  computed: {
    sjlbData() {
      return this.lbglData.slice((this.nowPage - 1) * this.nowNum, this.nowPage * this.nowNum);
    }
  },
  mounted() {
    this.getallLbgl();
  },
  methods: {
    //删除所有
    allDel() {
      this.$confirm('确认删除所选标签？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let str = '';
        for (let i = 0; i < this.delFrom.length; i++) {
          if (this.delFrom[i].num) {
            str = str + `"${this.delFrom[i].name}"` + " "
          }
        }
        if (str) {
          console.log(str)
          this.$message({
            message: '角色:' + str + '下存在成员，无法删除',
            type: 'warning'
          })
        } else {
          this.batchDel();
        }
      })
    },
    batchDel() {
      this.$axios({
        url: '/oparate/allDelLabel',
        method: 'post',
        data: this.delFrom
      }).then(() => {
        this.getallLbgl();
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      })
    },
    selectCheck(selection) {
      this.delFrom = selection;
    },
    // 刷新所有数据
    getallLbgl() {
      this.$axios({
        url: '/operate/getalllabel',
        method: 'get'
      }).then((res) => {
        let data = res.data.data;
        console.log(data)
        data.filter((v) => {
          if (v.shelf == '是') {
            v.shelf = true;
          } else {
            v.shelf = false;
          };
        });
        this.lbglData = data;
        this.ruleForm = {
          title: '',
          address: '',
          shelf: '',
        }
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
          this.ruleForm = {
            title: '',
            address: '',
            shelf: '',
          }
        })
        .catch(_ => { });
    },
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },

    //编辑传数据
    editData(data) {
      this.dialogVisible2 = true;
      this.ruleForm = { ...data };
      console.log(this.ruleForm)
    },
    // 确认编辑
    editSure(res) {
      this.$axios({
        url: '/oparate/editLabel',
        method: 'post',
        data: this.ruleForm
      }).then(() => {
        this.dialogVisible2 = false;
        this.ruleForm = {
          title: '',
          address: '',
          shelf: '',
        }
        this.getallLbgl();
      })
    },
    // 添加
    submitForm(formName) {
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     alert('submit!');
      //   } else {
      //     console.log('error submit!!');
      //     return false;
      //   }
      // });
      this.$axios({
        url: '/operate/addLabel',
        method: 'post',
        data: this.ruleForm
      }).then((res) => {
        this.ruleForm = {
          area: '',
          freight: ''
        }
        this.dialogVisible = false;
        this.ruleForm = {
          title: '',
          address: '',
          shelf: '',
        }
        this.getallLbgl();
      })
    },

    labelPosition() {

    },
    // 删除弹出信息
    delSure(data) {
      this.$confirm('确认删除该信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.del(data);
      })
    },
    // 删除数据的方法
    del(data) {
      this.$axios({
        url: '/oprate/delLabel',
        method: 'post',
        data: data
      }).then(() => {
        this.getallLbgl();
      })
    },
    // 是否上架
    labelShelf(val) {
      //val与scope.row类似，代表点击的这一行数据这一行
      if (val.shelf) {
        val.shelf = '是'
      } else {
        val.shelf = '否'
      }
      console.log(val);
      // 调用数据
      this.$axios({
        url: '/operate/labelShelf',
        method: 'post',
        data: val
      }).then(() => {
        if (val.shelf == '是') {
          this.$message({
            message: '商品上架',
            type: 'success'
          });
        } else {
          this.$message({
            message: '商品下架成功',
            type: 'warning'
          });
        }
        this.getallLbgl();
      })


    }
  }
}
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
}
clear::after {
  content: "";
  display: none;
  clear: both;
}
#lbgl {
  font-size: 12px;
  color: rgb(51, 51, 51);
}

#sjlb {
  background-color: rgb(242, 242, 242);
  padding: 0 15px 30px 15px;
  color: black;
  padding-left: 15px;
}
#sjlb div:first-child {
  font-size: 14px;
  color: rgb(102, 102, 102);
  line-height: 40px;
  margin-top: 15px;
  margin-bottom: 15px;
}
#sjlb div:first-child span {
  float: left;
}
/* #sjlb div:nth-child(2) {
  margin-top: -30px;
} */
/* #sjlb div:nth-child(2) {
  clear: both;
  padding: 10px 0 10px 0;
} */
#sjlb div:nth-child(2) .sjlb_btn {
  float: right;
  line-height: 25px;
  margin-left: 15px;
  width: 80px;
  margin: 10px 0 10px 15px;
}

#sjlb div:nth-child(2) label {
  margin-right: 5px;
}
/* 表格文字居中对齐 */
#sjlb .sjlb_table /deep/.el-table th > .cell {
  text-align: center;
  font-size: 14px;
  color: rgb(51, 51, 51);
}

#sjlb .sjlb_table /deep/.el-table .cell {
  text-align: center;
  font-size: 12px;
  color: rgb(102, 102, 102);
}
#sjlb .sjlb_page {
  margin-top: 30px;
  text-align: center;
}
.el-form /deep/ .el-form-item {
  margin: 40px;
}
.el-form .el-form-item /deep/ .el-col {
  margin-top: -40px;
}
.el-form .el-form-item /deep/ .el-col:first-child {
  margin-left: -40px;
}
.el-dialog__body /deep/.el-from {
  text-align: center;
}
.el-form-item__content .el-button {
  width: 80px;
  line-height: 40px;
}
</style>
